<script setup lang="ts">
import SingleUpload from "@/components/Upload/SingleUpload.vue";
import { convertProductCateOptions } from "@/utils/convertCategoryTree";
import { getCategoryTree } from "@/api/category";
import { getProductDetail } from "@/api/product";
import { ElMessage } from "element-plus";
import MultiUpload from "@/components/Upload/MultiUpload.vue";
import { ProductSaveOrUpdateVO } from "@/api/product/types";

const props = defineProps(["modelValue"]);
const productCateOptions = ref<any>([]);
const productInfoForm = ref(ElForm);
const rules = ref({
  categoryId: [{ required: true, message: "请选择商品分类", trigger: "blur" }],
  title: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
  itemType: [{ required: true, message: "请输入商品系列", trigger: "blur" }],
  image: [
    // 判断是否有url
    { required: true, message: "请上传商品图片", trigger: "change" },
  ],
});
const selectProductCateValue = ref<any>([]);
const emits = defineEmits(["next-step"]);
const handleNext = () => {
  // 校验表单
  productInfoForm.value.validate((valid: any) => {
    if (valid) {
      emits("next-step");
      // console.log(productValue.value);
    } else {
      ElMessage.warning("请填写完整信息");
      return false;
    }
  });
};
const productValue = inject("productParam") as Ref<ProductSaveOrUpdateVO>;
// 获取分类树形数据
const getProductCateOptions = () => {
  // 获取分类树形数据
  getCategoryTree().then((res) => {
    productCateOptions.value = convertProductCateOptions(res.data);
    // 回显分类，找到productValue.value.categoryId对应的分类，但是这里有个问题，就是分类是多级的，所以需要找到最后一个分类
    // 但是productValue.value.categoryId只是最后一个分类的id，所以需要将分类的id数组赋值给selectProductCateValue
    selectProductCateValue.value = productValue.value.categoryId;
  });
};
/**
 * 监听区域
 */
// 监听分类选择
watch(selectProductCateValue, (val) => {
  // 如果是修改商品，那么没有改变分类时，不需要重新赋值
  if (val === productValue.value.categoryId) {
    return;
  }
  productValue.value.categoryId = val[val.length - 1];
});
getProductCateOptions();
</script>

<template>
  <div style="margin-top: 50px">
    <el-form
      :model="productValue"
      :rules="rules"
      ref="productInfoForm"
      label-width="120px"
      class="form-inner-container"
      size="default"
    >
      <el-form-item label="商品分类" prop="categoryId">
        <el-cascader
          v-model="selectProductCateValue"
          :options="productCateOptions"
          style="width: 300px"
          clearable
          placeholder="请选择商品分类"
        />
      </el-form-item>
      <el-form-item label="商品名称" prop="title">
        <el-input
          v-model="productValue.title"
          maxlength="100"
          show-word-limit
          clearable
          placeholder="请输入商品名称"
        />
      </el-form-item>
      <el-form-item label="商品系列" prop="itemType">
        <el-input
          v-model="productValue.itemType"
          :autosize="{ minRows: 1, maxRows: 3 }"
          maxlength="100"
          show-word-limit
          type="textarea"
          placeholder="请输入商品系列"
          clearable
        />
      </el-form-item>
      <el-form-item label="商品图片" prop="image">
        <single-upload v-model="productValue.image" />
      </el-form-item>
      <el-form-item label="商品缩略图" prop="thumbnails">
        <multi-upload v-model="productValue.thumbnails" />
      </el-form-item>
      <el-form-item style="margin-top: 50px; text-align: center">
        <el-button type="primary" size="default" @click="handleNext"
          >下一步，填写商品销售信息</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
.form-container {
  width: 960px;
}

.form-inner-container {
  width: 800px;
}
</style>
